<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>vote</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/roles-display.css">
</head>
<body>
<div class="wrap">
    <div class="fonts">
        <header>投票给你怀疑的玩家</header>

        <!--随机生成的玩家身份匹配结果-->
        <main></main>

        <footer><button class="f-btn" id="next">投票结果</button></footer>
    </div>
</div>
<script src="../jQuery/jquery-3.2.1.js"></script>
<script>
    $(document).ready(function () {
        var players = JSON.parse(sessionStorage.players);//提取保存玩家信息的对象数组
        console.log(players);
        var game = JSON.parse(sessionStorage.game);//提取保存游戏进程信息的数组
        var lastVoted;//保存本轮被投死玩家的号码
        var wolves = [];//定义投票后存活的狼人数
        var humans = [];//定义投票后存活的平民数
        var voted = JSON.parse(sessionStorage.voted);//获取之前被投死的玩家数组；

        for(var i=0; i < players.length; i++) {
            //显示玩家角色信息的dom元素
            var content = "<div class='identity flex-center shadow'>";
            if(players[i].role === "狼人") {
                content += "<img src='../image/cute-wolf2.png'>";
            }else {
                content += "<img src='../image/farmer2.png'>";
            }
            content += "<span class='player'>" + (i+1) + " 号" + "</span></div>";

            //玩家介绍元素动态添加到页面中
            $("main").append(content);
        }

        //先把已被杀死或投死的玩家标识出来
        $("main div").each(function (i) {
            if(players[i].status === "killed" || players[i].status === "voted") {
                $(this).css("backgroundColor", "gray");
            }
        })
        //选择要放逐的玩家
        .click(function () {
            var n = $(this).index("main div");//获取当前点击选手的索引
            console.log(n);

            if(players[n].status === "killed" || players[n].status === "voted") {
                alert("一个人是不能死两次的！");
            }else {
                //如果改变了要投死的目标，则要将之前的对象状态复位
                if(lastVoted !== undefined) {
                    players[lastVoted].status = "alive";//状态复位
                    $("main div").eq(lastVoted).css("backgroundColor", "white");//背景色复位
                    voted.pop();//“被投死的玩家”数组复位
                }
                $(this).css("backgroundColor", "red");//被杀死的选手改变其背景色为红色
                players[n].status = "voted"; //记录被杀死玩家的状态
                players[n].records = game.day;//记录被杀死玩家的死亡时间
                lastVoted = n;//记录被杀死玩家的索引
                voted.push(n+1);//将被投死玩家的id加入killed数组

                //生成最新的“存活狼人”数组和“存活平民”数组
                wolves = players.filter(function (player) {
                    return player.status === "alive" && player.role === "狼人";
                });

                humans = players.filter(function (player) {
                    return player.status === "alive" && player.role === "平民";
                });

                console.log("存活的狼人数组：" + wolves + "</br>存活的平民数组：" + humans);
                sessionStorage.players = JSON.stringify(players);//存储更新后的玩家对象数组
                sessionStorage.lastVoted = JSON.stringify(lastVoted);//将本轮被杀死玩家信息传递至下个页面
                sessionStorage.voted = JSON.stringify(voted);//存储更新后的“被投死玩家”数组
            }
        });

        //底部按钮点击事件，判断是去发表遗言页面还是结束游戏页面
        $("#next").click(function () {
            if (lastVoted === undefined){
                alert("投票给你怀疑的对象！");
            }
            //平民获胜的情况，并去结果页；
            else if(wolves.length === 0 ){
                game.winner = "平民";
                game.winnerText = "福尔摩斯般的逻辑，找狼高手就是你！";
                sessionStorage.game = JSON.stringify(game);
                location.href="result.html";
            }
            //狼人获胜的情况，并去结果页；
            else if(wolves.length >= humans.length-1) {
                game.winner = "狼人";
                game.winnerText = "太棒了！谁都不服就服你的演技！";
                sessionStorage.game = JSON.stringify(game);
                location.href = "result.html";
            }
            //游戏继续；
            else{
                game.day++;//游戏天数加 1
                sessionStorage.game = JSON.stringify(game);
                location.href="after-vote.html";
            }
        });
    })
</script>
</body>
</html>